<template>
    <div>
        <el-row :gutter="20" class="form-line">
            <el-col :span="3" class="form-label">
                服务名称
            </el-col>
            <el-col :span="3">
                <el-input v-model="serviceObj.serviceName" size="small"></el-input>
            </el-col>
            <el-col :span="6" :offset="12">
                <el-button type="primary" size="small" @click="selectServiceList">查询</el-button>
                <el-button type="primary" size="small" @click="serviceObj.dialogCreateService = true">新增</el-button>
            </el-col>
        </el-row>

        <el-table
                :data="serviceObj.serviceListForShow"
                min-width="100%">
            <el-table-column
                    prop="serviceCode"
                    label="服务编号"
                    min-width="35%">
            </el-table-column>
            <el-table-column
                    prop="serviceName"
                    label="服务名称"
                    min-width="35%">
            </el-table-column>
            <el-table-column
                    label="操作" min-width="30%">
                <template slot-scope="scope">
                    <el-popover
                            placement="top"
                            width="160"
                            v-model="scope.row.popover">
                        <p>确认删除？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="scope.row.popover = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="deleteService(scope.row.id)">确定</el-button>
                        </div>
                        <el-button class="delete-margin" size="small" type="text" slot="reference">删除</el-button>
                    </el-popover>
                    <el-button type="text" size="small" @click="openServiceUserDialog(scope.row)">授权</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination
                class="se-pagination"
                @size-change="handleSizeChangeServiceUser"
                @current-change="handleCurrentChangeServiceUser"
                :current-page.sync="serviceObj.currentPageServiceUser"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="serviceObj.currentSizeServiceUser"
                :hide-on-single-page="false"
                layout="total, sizes, prev, pager, next"
                :total="serviceObj.total">
        </el-pagination>
        <el-dialog title="人员管理" :visible.sync="serviceObj.dialogFormVisibleServiceUser" width="70%">
            <el-row :gutter="20" class="form-line">
                <el-col :span="4" class="form-label">
                    人员名称
                </el-col>
                <el-col :span="4">
                    <el-input v-model="serviceObj.userName" size="small"></el-input>
                </el-col>
                <el-col :span="6" :offset="10">
                    <el-button type="primary" size="small" @click="selectServiceUserList">查询</el-button>
                    <el-button type="primary" size="small" @click="serviceObj.dialogFormVisibleServiceUserAdd = true">新增</el-button>
                </el-col>
            </el-row>

            <el-table
                    :data="serviceObj.serviceUserListForShow"
                    min-width="100%">
                <el-table-column
                        prop="userId"
                        label="人员编号"
                        min-width="25%">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="人员姓名"
                        min-width="25%">
                </el-table-column>
                <el-table-column
                        label="操作" min-width="25%">
                    <template slot-scope="scope">
                        <el-popover
                                placement="top"
                                width="160"
                                v-model="scope.row.popover">
                            <p>确认删除？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="scope.row.popover = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="deleteServiceUser(scope.row.id)">确定</el-button>
                            </div>
                            <el-button class="delete-margin" size="small" type="text" slot="reference">删除</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination
                    class="se-pagination"
                    @size-change="handleSizeChangeService"
                    @current-change="handleCurrentChangeService"
                    :current-page.sync="serviceObj.currentPageService"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="serviceObj.currentSizeService"
                    :hide-on-single-page="false"
                    layout="total, sizes, prev, pager, next"
                    :total="serviceObj.totalService">
            </el-pagination>

            <el-dialog title="服务授权" :visible.sync="serviceObj.dialogFormVisibleServiceUserAdd" width="30%" append-to-body>
                <el-form label-width="80px" :model="serviceObj" :rules="rules" ref="serviceUserForm">
                    <el-form-item label="查询人员" prop="userId">
                        <el-select
                                v-model="serviceObj.userId"
                                size="small"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请输入编号或姓名"
                                :remote-method="selectUser"
                                :loading="serviceObj.loading">
                            <el-option
                                    v-for="item in serviceObj.userList"
                                    :key="item.userId"
                                    :label="item.userName"
                                    :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="serviceObj.dialogFormVisibleServiceUserAdd = false">取 消</el-button>
                    <el-button type="primary" @click="insertServiceUser('serviceUserForm')">确 定</el-button>
                </div>
            </el-dialog>
        </el-dialog>
        <el-dialog title="创建服务" :visible.sync="serviceObj.dialogCreateService" width="30%">
            <el-form label-width="80px" :model="serviceObj.serviceForm" :rules="rules" ref="serviceForm">
                <el-form-item label="服务编码" prop="addServiceCode">
                    <el-input v-model="serviceObj.serviceForm.addServiceCode" size="small"></el-input>
                </el-form-item>
                <el-form-item label="服务名称" prop="addServiceName">
                    <el-input v-model="serviceObj.serviceForm.addServiceName" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="serviceObj.dialogCreateService = false">取 消</el-button>
                <el-button type="primary" @click="insertService('serviceForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                serviceObj: {
                    serviceCode: "",
                    serviceName: "",
                    serviceList: [],
                    serviceListForShow: [],
                    serviceUserList: [],
                    serviceUserListForShow: [],
                    userName: "",
                    currentPageServiceUser: 1,
                    currentSizeServiceUser: 10,
                    currentPageService: 1,
                    currentSizeService: 10,
                    totalService: 0,
                    totalServiceUser: 0,
                    dialogFormVisibleServiceUser: false,
                    dialogFormVisibleServiceUserAdd: false,
                    dialogCreateService: false,
                    userId: "",
                    loading: false,
                    userList: [],
                    serviceForm: {
                        addServiceCode: "",
                        addServiceName: ""
                    }
                },
                rules: {
                    userId: [
                        {required: true, message: '请选择人员', trigger: 'change'}
                    ]
                }
            };
        },
        mounted: function () {
            this.selectServiceList();
        },
        methods: {
            selectServiceUserList: function () {
                axios.get('/se/service/selectServiceUser', {
                    params: {
                        serviceCode: this.serviceObj.serviceCode,
                        userName: this.serviceObj.userName
                    }
                }).then(res => {//用function会获取不到vue data值
                    this.serviceObj.serviceUserList = res.data.data;
                    this.serviceObj.totalService = this.serviceObj.serviceUserList.length;
                    this.showCurrentPageServiceUser();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            selectServiceList: function () {
                axios.get('/se/common/selectService', {
                        params: {
                            serviceName: this.serviceObj.serviceName
                        }
                    }
                ).then(res => {//用function会获取不到vue data值
                    this.serviceObj.serviceList = res.data.data;
                    this.serviceObj.total = this.serviceObj.serviceUserList.length;
                    this.showCurrentPageService();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleSizeChangeServiceUser: function (pageSize) {
                this.serviceObj.currentSizeServiceUser = pageSize;
                this.showCurrentPageServiceUser();
            },
            handleCurrentChangeServiceUser: function (curPage) {
                this.showCurrentPageServiceUser();
            },
            showCurrentPageServiceUser: function () {
                let start = (this.serviceObj.currentPageServiceUser - 1) * this.serviceObj.currentSizeServiceUser;
                let end = this.serviceObj.currentPageServiceUser * this.serviceObj.currentSizeServiceUser;
                this.serviceObj.serviceUserListForShow = this.serviceObj.serviceUserList.slice(start,end);
            },
            handleSizeChangeService: function (pageSize) {
                this.serviceObj.currentSizeService = pageSize;
                this.showCurrentPageService();
            },
            handleCurrentChangeService: function (curPage) {
                this.showCurrentPageService();
            },
            showCurrentPageService: function () {
                let start = (this.serviceObj.currentPageService - 1) * this.serviceObj.currentSizeService;
                let end = this.serviceObj.currentPageService * this.serviceObj.currentSizeService;
                this.serviceObj.serviceListForShow = this.serviceObj.serviceList.slice(start,end);
            },
            selectUser: function (query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        axios.get('/se/common/searchUser', {
                            params: {
                                userContent: query
                            }
                        }).then(res => {
                            this.serviceObj.userList = res.data.data;
//                            response.data.data.forEach(element => {
//                                this.serviceObj.userList.push({name:element.name,code:element.code});
//                            })
                        }).catch(function (error) {
                            console.log(error);
                        });

                        this.loading = false;
                    }, 200);
                }
            },
            insertService: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/se/service/insertService',
                            Qs.stringify({
                                serviceCode: this.serviceObj.serviceForm.addServiceCode,
                                serviceName: this.serviceObj.serviceForm.addServiceName
                            })
                        ).then(res => {
                            this.selectServiceList();
                            this.serviceObj.dialogCreateService = false;
                            this.serviceObj.serviceForm.addServiceCode = null;
                            this.serviceObj.serviceForm.addServiceName = null;
                        });
                    } else {
                        return false;
                    }
                });
            },
            insertServiceUser: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/se/service/insertServiceUser',
                            Qs.stringify({
                                serviceCode: this.serviceObj.serviceCode,
                                userId: this.serviceObj.userId,
                                userName: this.serviceObj.userList.filter(item => item.userId == this.serviceObj.userId)[0].userName,
                            })
                        ).then(res => {
                            this.serviceObj.dialogFormVisibleServiceUserAdd = false;
                            this.selectServiceUserList();
                        });
                    } else {
                        return false;
                    }
                });
            },
            deleteServiceUser: function (id) {
                axios.delete('/se/service/deleteServiceUser',
                    {
                        params: {
                            id: id
                        }
                    }
                ).then(res => {
                    this.selectServiceUserList();
                });
            },
            deleteService: function (id) {
                axios.delete('/se/service/deleteService',
                    {
                        params: {
                            id: id
                        }
                    }
                ).then(res => {
                    this.selectServiceList();
                });
            },
            openServiceUserDialog: function (rowData) {
                this.serviceObj.dialogFormVisibleServiceUser = true;
                this.serviceObj.serviceCode = rowData.serviceCode;
                this.selectServiceUserList();
            }
        },
        watch: {
            '$route' (to, from) {
                this.selectServiceList();
            }
        }
    }
</script>